import React, { useState } from 'react';
import { IonPage, IonHeader, IonToolbar, IonTitle, IonButtons, IonMenuButton, IonContent, IonSegment, IonSegmentButton, IonLabel, IonGrid, IonRow, IonCol } from '@ionic/react';
import { useTranslation } from 'react-i18next';
import ServerManagement from '../../components/models/ServerManagement';
import ModelCreation from '../../components/models/ModelCreation';
import ModelManagement from '../../components/models/ModelManagement';
import ModelRegistry from '../../components/models/ModelRegistry';
import ModelListing from '../../components/models/ModelListing';
import OllamaInstallGuide from '../../components/common/OllamaInstallGuide';
import OllamaVersionCheck from '../../components/common/OllamaVersionCheck';
import { SettingsPage } from './SettingsPage';

type TabValue = 'server' | 'create' | 'manage' | 'registry' | 'list' | 'settings';

export const ModelsPage: React.FC = () => {
  const [selectedTab, setSelectedTab] = useState<TabValue>('server');
  const { t } = useTranslation();

  const renderContent = () => {
    switch (selectedTab) {
      case 'server':
        return <ServerManagement />;
      case 'create':
        return <ModelCreation />;
      case 'manage':
        return <ModelManagement />;
      case 'registry':
        return <ModelRegistry />;
      case 'list':
        return <ModelListing />;
      case 'settings':
        return <SettingsPage />;
      default:
        return <ServerManagement />;
    }
  };

  const handleTabChange = (e: CustomEvent) => {
    const value = e.detail.value as TabValue;
    setSelectedTab(value);
  };

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonMenuButton />
          </IonButtons>
          <IonTitle>{t('models.title')}</IonTitle>
        </IonToolbar>
        <IonToolbar>
          <IonSegment value={selectedTab} onIonChange={handleTabChange}>
            <IonSegmentButton value="server">
              <IonLabel>{t('nav.server')}</IonLabel>
            </IonSegmentButton>
            <IonSegmentButton value="create">
              <IonLabel>{t('nav.create')}</IonLabel>
            </IonSegmentButton>
            <IonSegmentButton value="manage">
              <IonLabel>{t('nav.manage')}</IonLabel>
            </IonSegmentButton>
            <IonSegmentButton value="registry">
              <IonLabel>{t('nav.registry')}</IonLabel>
            </IonSegmentButton>
            <IonSegmentButton value="list">
              <IonLabel>{t('nav.list')}</IonLabel>
            </IonSegmentButton>
            <IonSegmentButton value="settings">
              <IonLabel>{t('nav.settings')}</IonLabel>
            </IonSegmentButton>
          </IonSegment>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <IonGrid>
          <IonRow>
            <IonCol size="12" sizeMd="8">
              {renderContent()}
            </IonCol>
            <IonCol size="12" sizeMd="4">
              <OllamaInstallGuide />
              <OllamaVersionCheck />
            </IonCol>
          </IonRow>
        </IonGrid>
      </IonContent>
    </IonPage>
  );
}; 